<template>
	<view class="home flex-col">
		<u-swiper :list="swiperList" height="180" radius="0" indicator circular></u-swiper>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="3" class="">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日值班</text></view>
					</template>
					<view class="leader-list">
						<view class="leader-list-item" v-for="(item, index) in leaderList" :key="index">
							<view class="left">
								<u-avatar size="60" src="/static/img/avatar.png" shape="square"></u-avatar>
								<view class="m-l-10">
									<view class="">
										<text class="name m-r-10">{{ item.name }}</text>
										<text class="fw">{{ item.phone }}</text>
									</view>
									<view class="post m-t-5">{{ item.duty }}</view>
								</view>
							</view>
							<view class="right">
								<image style="width: 100%; height: 100%;" :src="`/static/img/${item.type}.png`"></image>
							</view>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item name="2" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产进度统计</text></view>
					</template>
					<my-grid :list="list" :decimals="2"></my-grid>
					<!-- <view class="fw m-t-10 tl"> 每月剥离计划概况 </view>
					<view class="charts-box">
						<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					</view> -->
				</u-collapse-item>
				<!-- <u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">信息发布</text></view>
					</template>
					<view class="p-10 m-t-10" style="background: #F5F7FE;" v-for="(item,index) in messageList">
						<text class="fw">{{item.title}}</text>
						<view class="flex m-between m-t-5">
							<text>发布人: {{item.name}}</text>
							<text>时间: {{item.time}}</text>
						</view>
					</view>
					<u-line class="m-t-20 m-b-20"></u-line>
					<up-text class="m-t-10" style="justify-content: center !important;" text="查看更多" :bold="true" color="#0052D9" size="14"></up-text>
				</u-collapse-item> -->
				<u-collapse-item name="4" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">职工出勤</text></view>
					</template>
					<my-grid :list="list2" :col="2"></my-grid>
				</u-collapse-item>
				<u-collapse-item name="5" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">车辆统计</text></view>
					</template>
					<my-grid :list="list3" :col="3"></my-grid>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>
				<u-collapse-item name="6" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">仓储统计</text></view>
					</template>
					<my-grid :list="list4" :col="1"></my-grid>
					<my-grid class="m-t-10" :list="list5" :col="3"></my-grid>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5, 6])
	let list = ref([{ // 产销统计
			title: '昨日采煤量',
			value: '1.32',
			unit: '万t'
		}, {
			title: '月累计产煤量',
			value: '1.32',
			unit: '万t'
		}, {
			title: '年累计产煤量',
			value: '1.32',
			unit: '万t'
		}, {
			title: '昨日剥离量',
			value: '32.32',
			unit: '万m³'
		}, {
			title: '月累计剥离量',
			value: '1.32',
			unit: '万m³'
		}, {
			title: '年累计剥离量',
			value: '1.32',
			unit: '万m³'
		}]),
		list2 = ref([{
			title: '总出勤人数',
			value: '176',
			unit: '人'
		}, {
			title: '剥离队',
			value: '120',
			unit: '人'
		}, {
			title: '采煤队',
			value: '55',
			unit: '人'
		}, {
			title: '选煤厂',
			value: '132',
			unit: '人'
		}]),
		list3 = ref([{
			title: '车辆总数',
			value: '176',
			unit: '辆'
		}, {
			title: '剥离队车辆总数',
			value: '120',
			unit: '辆'
		}, {
			title: '采煤队车辆数',
			value: '55',
			unit: '辆'
		}]),
		list4 = ref([{
			title: '煤仓总储量',
			value: '190',
			unit: '万吨'
		}]),
		list5 = ref([{
			title: '日进矿车数',
			value: '176',
			unit: '人'
		}, {
			title: '日出矿车数',
			value: '120',
			unit: '人'
		}, {
			title: '当前排队',
			value: '55',
			unit: '人'
		}]),
		leaderList = ref([{
			name: '吴朋飞',
			phone: '182932237245',
			duty: '地测副总工程师',
			type: 'day'
		}, {
			name: '谢银春',
			phone: '13019981029',
			duty: '总工程师',
			type: 'night'
		}]),
		chartData = ref({}),
		chartData1 = ref({}),
		messageList = ref([{
			title: '这是发布的标题',
			name: '王1212',
			time: '2023-02-12'
		}, {
			title: '这是发布的标题',
			name: '王1212',
			time: '2023-02-12'
		}, {
			title: '这是发布的标题',
			name: '王1212',
			time: '2023-02-12'
		}]),
		opts = {
			color: ["#0052D9", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [10, 10, 0, 10],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				showTitle: true,
				data: [{
					min: 0,
					title: '万吨'
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow"
				}
			}
		},
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: true,
				position: 'bottom'
			},
			dataLabel: false,
			title: {
				name: "",
				fontSize: 40,
				color: "#0853FF",
				offsetY: -5
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		swiperList = ref(['/static/img/banner1.jpg', '/static/img/banner2.jpg'])
	const getServerData = () => {
		setTimeout(() => {
			let res = {
				categories: ["8.1", "8.2", "8.5", "8.6", "8.9", "8.20"],
				series: [{
					name: "",
					setShadow: [
						3,
						8,
						10, "#FC8452"
					],
					data: [2, 8, 5, 7, 4, 2]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
			let res1 = {
				series: [{
					data: [{
						name: "钻机",
						value: 36,
					}, {
						name: "辅助挖机",
						value: 30,
					}, {
						name: "铲车",
						value: 16,
					}, {
						name: "挖机",
						value: 16,
					}, {
						name: "推土机",
						value: 16,
					}]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));
		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.leader-list {
		margin-top: -20rpx;

		.leader-list-item {
			background: #F5F7FE;
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052D9;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>